<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="./css/5-2022-11-25-李大任.min.css">
</head>

<body>
    <section id="app">
        <h2 class="title" ref="title">我的购物车</h2>
        <table class="shopcart" v-if="goods.length>0">
            <thead>
                <tr>
                    <th colspan="2" class="goods-name">商品名称</th>
                    <th class="goods-info">商品信息</th>
                    <th class="orther">单价</th>
                    <th class="orther">数量</th>
                    <th class="orther">小计</th>
                    <th class="orther">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in goods" :key="item.id">
                    <td>
                        <div class="img">
                            <img :src="item.imgs" alt="">
                        </div>
                    </td>
                    <td>
                        <div class="info">{{item.goodsInfo}}</div>
                    </td>
                    <td>
                        <div v-for="(value,index) in item.goodsDetailList" :key="value+index">{{value}}</div>
                    </td>
                    <td>
                        &yen;<span>{{item.price}}</span>
                    </td>
                    <td>
                        <div class="num-box">
                            <button @click="callCount({item,val:-1},$event)">-</button>
                            <input type="text" v-model.number="item.num" @input="handleNum(item,$event)">
                            <button @click="callCount({item,val:1},$event)">+</button>
                        </div>
                    </td>
                    <td class="red">
                        &yen;{{item.price*item.num}}
                    </td>
                    <td>
                        <div class="btn-delete" @click="callDeleteGood(item)">删除</div>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="7">
                        <div class="text-right">
                            <span>预计金额总计:</span>
                            <span class="red">&yen;{{allPrice}}</span>
                        </div>
                    </td>
                </tr>
            </tfoot>
        </table>
        <div v-else class="show-all">
            <svg class="show-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="327.140625" height="60.59375" viewBox="0 0 327.140625 60.59375"><g style="mix-blend-mode:passthrough"><path d="M8.875,38.8906L52.6406,32.625L53.6406,39.3281L33.8438,42.1406L34.2656,53.6094L56.5156,53.9062L56.4531,60.5938L4.32812,60.0156L4.39062,53.25L27.4375,53.5469L27,43.1562L9.73438,45.6094L8.875,38.8906ZM51.8438,20.2344L52.7812,12.2344L7.28125,14.3906L8.14062,19.7969L1.4375,20.8125L0,11.7344L3.23438,7.84375L24.8438,6.84375L22.9688,3.09375L29.0938,0L32.3281,6.46875L56.4531,5.32812L59.9844,9.0625L58.6094,20.9531L51.8438,20.2344ZM31.4062,22.5312L33.7812,16.125L51.7031,22.9688L49.25,29.3906L31.4062,22.5312ZM8,27.7969L17,17.1406L22.25,21.5312L13.25,32.2656L8,27.7969ZM80.875,38.8906L124.641,32.625L125.641,39.3281L105.844,42.1406L106.266,53.6094L128.516,53.9062L128.453,60.5938L76.3281,60.0156L76.3906,53.25L99.4375,53.5469L99,43.1562L81.7344,45.6094L80.875,38.8906ZM123.844,20.2344L124.781,12.2344L79.2812,14.3906L80.1406,19.7969L73.4375,20.8125L72,11.7344L75.2344,7.84375L96.8438,6.84375L94.9688,3.09375L101.094,0L104.328,6.46875L128.453,5.32812L131.984,9.0625L130.609,20.9531L123.844,20.2344ZM103.406,22.5312L105.781,16.125L123.703,22.9688L121.25,29.3906L103.406,22.5312ZM80,27.7969L89,17.1406L94.25,21.5312L85.25,32.2656L80,27.7969ZM178.781,53.0625L177.344,13.5L180.578,9.96875L198.906,9.1875L202.359,12.7812L199.844,52.625L196.594,55.7969L182.375,56.2969L178.781,53.0625ZM148.25,55.9375L155.234,44.8906L147.172,38.9688L146.016,34.8438L153.438,17.7656L146.234,17.0312L146.812,10.2656L156.312,11.1875L160.703,1.04688L166.906,3.78125L163.375,11.8438L175.25,12.9219L174.531,19.7188L160.484,18.4062L153.297,35.125L158.828,39.25L166.828,26.6562L172.594,30.2812L164.375,43.3125L177.047,52.5469L173.094,57.9531L160.781,48.9531L154.016,59.5312L148.25,55.9375ZM185.469,49.4531L193.297,49.0938L195.375,16.0938L184.25,16.5312L185.469,49.4531ZM244.719,19.6406L232.625,21.4219L230.391,50.3906L266.391,52.1875L268.406,44.6562L275.031,46.3594L272.219,56.5938L268.766,59.0938L226.5,56.9375L223.328,53.2812L225.703,22.4375L217.859,23.5938L216.844,16.9688L226.281,15.6094L227.219,3.21875L233.984,3.71875L233.125,14.5938L244.359,12.9375L243.781,2.35938L250.547,1.92188L251.047,11.9375L269.984,9.125L273.797,12.7969L271.641,33.6094L269.266,36.5625L260.984,38.8594L259.188,32.375L265.156,30.6562L266.594,16.3906L251.406,18.625L252.781,42.0938L246.016,42.4531L244.719,19.6406ZM315.766,45.875L293.297,40.0938L287.312,45.375L283.5,41.0938L290.625,34.8125L293.297,34.2344L316.125,40.0312L324.406,35.5156L327.141,40.6719L317.922,45.6719L315.766,45.875Z" fill="#9E9E9E" fill-opacity="1"/></g></svg>
        </div>
    </section>
    <script src="./lib/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                goods: [
                    {
                        id: 1,
                        imgs: "./images/cart_goods1.jpg",
                        goodsInfo: "【1111购物狂欢节】惠JackJones杰克琼斯纯羊毛菱形格",
                        goodsDetailList: ["颜色:073深红", "尺码:170/92A/S"],
                        price: 499.00,
                        num: 1,
                    },
                    {
                        id: 2,
                        imgs: "./images/cart_goods2.jpg",
                        goodsInfo: "九牧王王正品新款时尚休闲中长款茄克EK01357200",
                        goodsDetailList: ["颜色：淡蓝色", "尺码：165/88"],
                        price: 1102.00,
                        num: 1,
                    },
                    {
                        id: 3,
                        imgs: "./images/cart_goods3.jpg",
                        goodsInfo: "【1111购物狂欢节】捷王纯手工缝制休闲男鞋大头皮鞋 头层牛",
                        goodsDetailList: ["颜色：0922红棕现货", "尺码：40现货"],
                        price: 269.00,
                        num: 1,
                    }
                ]
            },
            computed: {
                allPrice: {
                    get() {
                        let all = 0;
                        for (let good of this.goods) {
                            all = all + good.num * good.price
                        }
                        return all;
                    }
                }
            },
            watch:{
                goods:{
                    handler(val){
                        if(val.length==0){
                            this.$refs.title.classList.add("yellow")
                        }
                    }
                }
            },
            methods: {
                callCount(obj, e) {
                    let { item, val } = obj;
                    val = item.num + val;
                    if (val <= 0) {
                        alert("商品数量不能小于1");
                        return;
                    } else if (val >= 100) {
                        alert("单件商品已达到最大购买量");
                        return;
                    }
                    item.num = val;
                },
                handleNum(item, e) {
                    let value = e.target.value
                    if (value <= 0) {
                        item.num = 1;
                    } else if (value >= 100) {
                        item.num = 99;
                    } else if (Number.isNaN(Number.parseInt(value))) {
                        item.num = 1;
                    }
                },
                callDeleteGood(item) {
                    for (let i = 0; i < this.goods.length; i++) {
                        if (this.goods[i].id == item.id) {
                            this.goods.splice(i, 1);
                        }
                    }
                }
            }
        });
    </script>
</body>

</html>